<template>
  <div class="home">
    <base-header title="万联城服集团数据可视化平台" :rightIcon=true @goReload="goReload"></base-header>
    <div class="home__content">
        <div class="home__content__left">
          <div class="home__content__left-in bg m10">
            <div class="back-border h100">
              <base-title title="客户服务" @goDetail="goCallCenter"></base-title>
              <service :yqAll="yqAll" :xgxjAll="xgxjAll" :bjbaDataAll="bjbaDataAll" :fwzxAll="fwzxAll" :cyqYear="cyqYear"></service>
            </div>
          </div>
        </div>
        <div class="home__content__center">
          <div class="bg m10 map-content">
            <div class="back-border map pt20">
              <a target="_blank" :href="href">
                <div class="health brain-health">
                  <img src="~images/community.png">
                  <span>社区大脑</span>
                </div>
              </a>
              <div class="health zone-health" @click="goHealth">
                <img src="~images/zone.png" alt="">
                <span>小区健康度</span>
              </div>
              <div class="health company-health" @click="goCompanyHealth">
                <img src="~images/company.png" alt="">
                <span>公司健康度</span>
              </div>
              <div class="map-data">
                <div class="map-data-item item1">
                  <span>总管理项目数</span>
                  <span class="nowrap"><span class="item-num">{{milliFormat(glmjAll.zglxms)}}</span>个</span>
                </div>
                <div class="map-data-item item2">
                  <span>总管理面积</span>
                  <span class="nowrap"><span class="item-num">{{milliFormat(glmjAll.zglmj)}}</span>平方米</span>
                </div>
              </div>
              <div style="width: 55%">
                <base-map :dtAll="[...dtAll]"></base-map>
              </div>
              <div class="map-data">
                <div class="map-data-item item3">
                  <span>总管理户数</span>
                  <span class="nowrap"><span class="item-num">{{milliFormat(glmjAll.zglhs)}}</span>户</span>
                </div>
                <div class="map-data-item item4">
                  <span>总服务人口数量</span>
                  <span class="nowrap"><span class="item-num">{{milliFormat(glmjAll.zfwrks)}}</span>人</span>
                </div>
              </div>
            </div>
          </div>
          <div class="company bg m10">
            <div class="back-border h100">
              <base-title title="公司运营" @goDetail="goCompanyOperates"></base-title>
              <base-company-data :gsyyAll="gsyyAll" :cwgsMothAll="cwgsMothAll" :cwgsDayAll="cwgsDayAll"></base-company-data>
            </div>
          </div>
        </div>
        <div class="home__content__right">
          <div class="home__content__right-base bg m10">
            <div class="back-border h100">
              <base-title title="红色物业" :leftIcon="leftIcon" class="red"></base-title>
              <base-property :hswyAll="hswyAll"></base-property>
            </div>
          </div>
          <div class="home__content__right-base bg m10">
            <div class="back-border h100">
              <base-title title="业委会事务"></base-title>
              <owners :ywhsx="ywhsx"></owners>
            </div>
          </div>
          <div class="home__content__right-base bg m10">
            <div class="back-border h100">
              <base-title title="工单" rightText="状态"></base-title>
              <order></order>
            </div>
          </div>
          <div class="home__content__right-base bg m10">
            <div class="back-border h100">
              <base-title title="疫情防控"></base-title>
              <epidemic :yqfkAll="yqfkAll" :month="month"></epidemic>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
import Vmap from 'v-charts/lib/map.common'
import BaseTitle from 'src/components/BaseTitle'
import BaseHeader from 'src/components/BaseHeader'
import BaseMap from 'src/components/BaseMap'
import BaseCompanyData from 'src/components/BaseCompanyData'
import BaseProperty from 'src/components/BaseProperty'
import Owners from 'src/components/Owners'
import Epidemic from 'src/components/Epidemic'
import Service from 'src/components/Service'
import Order from 'src/components/Order'
import { milliFormat } from 'js/utils'
import {
getSyAll,
getCityList
} from 'src/api/api'
import storage from 'good-storage'
import { loadToken } from 'assets/js/cache'

export default {
  name: 'Home',
  components: {
    BaseTitle,
    BaseHeader,
    BaseMap,
    BaseCompanyData,
    BaseProperty,
    Owners,
    Epidemic,
    Service,
    Order,
    [Vmap.name]: Vmap
  },
  data () {
    return {  
      mapHeight: document.documentElement.clientHeight * 0.55 + 'px',
      leftIcon: 'red',
      hswyAll: {},
      ywhsx: {},
      yqfkAll: {},
      gsyyAll: {},
      cwgsMothAll: {},
      cwgsDayAll: {},
      month: '',
      dtAll: [],
      glmjAll: {},
      yqAll: {},
      xgxjAll: {},
      bjbaDataAll: {},
      fwzxAll: {},
      cyqYear: '',
      setInterval: '',
      href: 'http://cbrain.wanlianshenghuo.com/#/login?sqToken=' + loadToken(),
    }
  },
  created() {
    this._getCityList()
  },
  mounted() {
    this._getSyAllData()
  },
  activated() {
    this.setInterval = setInterval(() => {  
      this._getSyAllData()
    }, 1000*60*60*2)
  },
  deactivated() {
    if(this.setInterval){
      clearInterval(this.setInterval)
    }
  },
  methods: {
    milliFormat(num) {
      return milliFormat(num)
    },
    goCallCenter() {
      this.$router.push('/callcenter')
    },
    _getSyAllData() {
      getSyAll().then(res=> {
         if (res.success === true) {
          this.hswyAll = res.data.hswyAll
          this.ywhsx = res.data.ywhsx
          this.yqfkAll = res.data.yqfkAll
          this.month = res.data.month
          this.gsyyAll = res.data.gsyyAll
          this.cwgsDayAll = res.data.cwgsDayAll
          this.cwgsMothAll = res.data.cwgsMothAll
          this.dtAll = res.data.dtAll
          this.glmjAll = res.data.glmjAll
          this.yqAll = res.data.yqAll
          this.xgxjAll = res.data.xgxjAll
          this.bjbaDataAll = res.data.bjbaDataAll
          this.fwzxAll = res.data.fwzxAll
          this.cyqYear =res.data.cyqYear
        }
      })
    },
    _getCityList() {
      getCityList().then(res=>{
        storage.set('cityList', res.data)
      })
    },
    goCompanyOperates() {
      this.$router.push('/companyoperates')
    },
    goHealth() {
      this.$router.push('/healthdegree')
    },
    goCompanyHealth() {
      this.$router.push('/companyhealth')
    },
    goReload() {
      this.$router.push('/reloadback')
      this._getCityList()
    }
  }
}
</script>

<style lang="scss">
@import '~styles/base.scss';
.home {
  background: #05070F;
  display: flex;
  flex-direction: column;
  &__content {
    // padding:20px;
    display: flex;
    height: 100%;
    &__left {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      &-in {
        flex: 1;
      }
    }
    &__center {
      width: 50%;
      // height: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      flex: 0 0 50%;
      .map-content {
        // height: 100%;
      }
      .map {
        display: flex;
        justify-content: center;
      }
      .map-data {
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-self: flex-end;
          // padding: 0 20px 40px 20px;
        &-item {
          display: flex;
          flex-direction: column;
          padding-bottom: 40px;
          position: absolute;
          span {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(255,255,255,1);
            line-height: 30px;
          }
          .item-num {
            font-size: 30px;
            font-family: "Gill Sans Extrabold", sans-serif;
            font-weight: 600;
            line-height: 30px;
            color: #FFEA00;
            padding-right: 10px;
          }
        }
        .item1 {
          top: 40%;
          left: 27%;
        }
        .item2 {
          top: 50%;
          left: 27%;
        }
        .item3 {
          top: 40%;
          left: 65%;
        }
        .item4 {
          top: 50%;
          left: 65%;
        }
      }
      .company {
        // height: 100%;
        // height: 400px;
      }
    }
    &__right {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      &-base {
      }
      
    }
  }
  .red .base-title__wrap-title {
    color: #FF2F14;
  }
  .health {
    display: flex;
    position: absolute;
    width:120px;
    height: 50px;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    // top: 10%;
    // left: 27%;
    background:rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #fff;
    img {
      height: 25px;
      width: 25px;
    }
    span {
      font-size:13px;
      font-family:Microsoft YaHei;
      font-weight:bold;
      padding-left: 4px;
      margin-top: 5px;
    }
  }
  .zone-health {
    top: 10%;
    left: 27%;
    width:120px;
  }
  .company-health {
    top: 17%;
    left: 27%;
    width:120px;
  }
  // .zl-health {
  //   top: 10%;
  //   left: 27%;
  // }
  .brain-health {
    top: 10%;
    right: 27%;
  }
}
// @media (min-width: 1920px) {
//   .home {
//     width: 100%;
//   }
// }
</style>>
